import React,{Component} from 'react';
import {connect} from 'react-redux';
import {deleteCart,update} from '../actions'
import { Button } from 'antd';
import { InputNumber } from 'antd';
const mapStateToProps=(state)=>{
    return{
        cart:state.carts
    }
}


class ListItem extends Component{ 
    constructor(){
        super()
        this.state={
            num:1
        }
    }

    handlerChange(e){
        this.setState({
            num:e.target.value
        })
    }

    onChangem(value,id){
        console.log(this.props)
        console.log('changed', value);
       this.props.update(value,id)
    }
    deleProductToCart=(id)=>{
        // console.log('carts',carts);
        console.log(id);
        this.props.deleteCart(id);
    }
    render(){
        const {img,title,content,quantity}=this.props;
        // console.log(quantity);
        return(
            <div className="media">
                <div className="media-left">
                    <a href="#">
                    <img className="media-object" src={img} width="80" height="80"></img>
                    </a>
                </div>
                <div className="media-body">
                    <h4 className="media-heading">{title}</h4>
                    {content}
                    <br/>
                    <strong>数量为：</strong>{quantity}<br/>
                    {/* <InputNumber min={1} max={99}   value={this.state.num} onChange={(e)=>this.handlerChange(e)} onBlur={()=>this.onChangem(+this.state.num,this.props.id)} /> */}
                    <input type="text" value={this.state.num} onChange={(e)=>this.handlerChange(e)} onBlur={()=>this.onChangem(+this.state.num,this.props.id)} />
                </div>
                <Button type="primary" id="btn"  onClick={()=>this.deleProductToCart(this.props.id)}>删除</Button>
            </div>
        )
    }
}


class Carts extends Component{
    constructor(){
        super()
        this.state={
            showH3:"block",
            showH4:"none"
        }
    }

    getlist(){
        const {cart}=this.props;
        var jsx=[];
        if(cart.length>0){
            for(var i=0;i<cart.length;i++){
                jsx.push(<ListItem key={i} {...cart[i]}></ListItem>)
            }
        }
        return jsx;
    }
    componentDidMount(){
        console.log(this.props.cart);
        if(this.props.cart.length>0){
         this.setState({
             showH3:"none",
             showH4:"block"
         })   
        }
    }
    handerMan(carts){
        console.log('carts',carts);
    }
    render(){
        console.log(this.props.cart)
        return(
            <div>
                <h3 id="cardk" style={{display:this.state.showH3}} >购物车,空空如也,快去添加物品</h3>
                {this.getlist()}
                <Button type="primary" id="btn1" style={{display:this.state.showH4}} onClick={()=>this.handerMan(this.props)}>账单提交</Button>
            </div>
        )
    }
}

export default connect(mapStateToProps,{deleteCart,update})(Carts);